<template>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 返回 -->
    <view>
      <navTabrBack
        :title="'委托信息详情'"
        :navbackStyle="['padding-right: 20rpx;']"
      ></navTabrBack>
    </view>
  </view>
  <view class="entrusContent">
    <view class="entTitle"
      >委托详情<view
        @click="deleInfo"
        class="iconfont icon-huishouzhan_huaban"
        v-if="type == 1"
      ></view
    ></view>
    <!-- 委托详情 -->
    <view class="essay">
      <view class="detailItem">
        <view class="patentTitle">标题：</view>
        <view class="patentText">{{ rezlEntrust.title }}</view>
      </view>
      <view class="detailItem">
        <view class="patentTitle">描述：</view>
        <view class="patentText">{{ rezlEntrust.content }}</view>
      </view>
      <view class="detailItem">
        <view class="patentTitle">专利类型：</view>
        <view class="patentText">{{ rezlEntrust.baseType }}</view>
      </view>
      <view class="detailItem">
        <view class="patentTitle">专利状态：</view>
        <view class="patentText">{{ rezlEntrust.baseStatus }}</view>
      </view>
      <view class="detailItem">
        <view class="patentTitle">截止时间：</view>
        <view class="patentText">{{ rezlEntrust.endTime?.split("T")[0] }}</view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="essay">
      <view class="detailItem">
        <view class="patentTitle">手机号码：</view>
        <a @click="toPhone(rezlEntrust.phone)" class="patentText phon">{{
          rezlEntrust.phone
        }}</a>
      </view>
      <view class="detailItem">
        <view class="patentTitle">QQ号码：</view>
        <view class="patentText phon">{{ rezlEntrust.qq }}</view>
      </view>
    </view>
    <!-- 专利集 -->
    <view v-if="isShow">
      <view class="entTitle">专利集</view>
      <view class="essay">
        <!-- 展示列表 -->
        <view class="serchItem" v-for="(item, index) in itemList" :key="index">
          <checkbox
            class="checkCream"
            value="cb"
            :checked="disabledList[index]"
            v-show="!disabledList[index]"
            @click="isCheckt(index)"
          />
          <image class="serchItemImg" :src="img + item.img" mode="scaleToFill" />
          <view @click="toCreamDetil(item.groupId)">
            <view class="patentTitle1">{{ item.name }}</view>
            <view class="patentClassify">{{ item.isAccepted }}条，订阅</view>
          </view>
        </view>
      </view>
    </view>
    <button type="parmay" v-show="isList" class="entBtn" @click="isOkEntrust">
      发起委托
    </button>
  </view>
  <!-- 确认删除 -->
  <uni-popup ref="popup1" type="bottom" :is-mask-click="false">
    <view class="dataList">
      <view class="addItemTitle">
        <view class="contacts">确认删除</view>
        <view class="loginInfo">是否确定删除当前专利集？</view>
        <view class="affirm">
          <view class="" @click="addDataList">取消</view>
          <view class="solid" @click="deleteEnt">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="删除委托成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success1" type="message">
    <uni-popup-message
      type="success"
      message="删除委托成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success2" type="message">
    <uni-popup-message
      type="error"
      message="请添加专利集！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success3" type="message">
    <uni-popup-message
      type="success"
      message="添加专利集成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, ref, reactive, toRefs, inject } from "vue";
import { onLoad } from "@dcloudio/uni-app";
let popup1 = ref();
let success = ref();
let success2 = ref();
let success3 = ref();
let $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  type: null,
  rezlEntrust: {},
  id: null,
  userInfo: {},
  dic: [],
  itemList: [],
  disabledList: [],
  addData: {},
  isShow: false,
  isList: true,
  img: ""
});
let { rezlEntrust, type, itemList, disabledList, isShow, isList,img } = toRefs(data);
const toPhone = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone, //仅为示例
  });
};
onMounted(() => {
  // 在小程序下面检测openid过期
  if (uni.getSystemInfoSync().hostName === "WeChat") {
    wx.checkSession({
      success() {},
      fail() {
        // uni.redirectTo({
        //   url: "/pages/login/login",
        // });
      },
    });
  }
});
const isOkEntrust = () => {
  if (
    !data.disabledList.includes(true) &&
    data.disabledList.length != 1 &&
    data.disabledList.length >= 1
  ) {
    success2.value.open();
    return;
  }
  data.disabledList.map((item, index) => {
    if (!item) {
      data.addData.groupId = data.itemList[index].ID;
      data.addData.entrustId = data.id * 1;
    }
  });

  uni.request({
    url: $url + `/zlEntrustAccpet/updateZlEntrustAccpet`,
    method: "PUT",
    timeout: 6000,
    data: {
      ID: data.id * 1, //接收委托列表的主键ID
      userId: data.rezlEntrust.userId * 1, //专利集所属用户ID
      groupId: data.addData.groupId, //专利集ID
      isAccepted: 1, //1表示发送联系方式，2表示不感兴趣
    },
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      // data.isShow = true;
      success3.value.open();
    },
  });
};
const isCheckt = (e) => {
  data.disabledList = data.disabledList.map((item, index) => {
    if (e == index) {
      return item;
    }
    return !item;
  });
};
onLoad((item) => {
  data.img = $imgSrc
  data.type = item.type;
  data.id = item.id;
  console.log(item);
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token.length < 1) {
        // uni.navigateTo({
        //   url: "/pages/login/login?type=1",
        // });
      }
      data.userInfo = res.data;
      uni.request({
        url: $url + `/zlBaseType/getZlBaseTypeList `,
        method: "GET",
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.dic = res.data.data.list;
        },
      });
      uni.request({
        url: $url + `/zlEntrust/findZlEntrust?ID=${item.id}`,
        method: "GET",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.rezlEntrust = res.data.data.rezlEntrust;
          data.dic.map((item) => {
            if (item.ID == res.data.data.rezlEntrust.baseType) {
              data.rezlEntrust.baseType = item.name;
            }
          });
        },
      });

      uni.request({
        url:
          $url +
          `/zlEntrustAccpet/getZlEntrustAccpetList?page=1&pageSize=100&entrustId=${data.id}`,
        method: "GET",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.itemList = res.data.data.list;
          if(data.itemList.length == 0) data.isList = false
          if (data.itemList.length != 0) data.isShow = true;
          data.itemList.map((item) => {
            data.disabledList.push(false);
          });
        },
      });
    },
  });
});
const addDataList = () => {
  popup1.value.close();
};
const deleteEnt = () => {
  uni.request({
    url: $url + `/zlEntrust/deleteZlEntrust`,
    method: "DELETE",
    timeout: 6000,
    data: { id: data.id * 1 },
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open();
      setTimeout(() => {
        uni.navigateBack({
          fail: () => {
            uni.switchTab({
              url: "/pages/index/index",
            });
          },
          success: () => {
            let page = getCurrentPages().pop();
            if (page) {
              page.onLoad(page.options); //执行上个页面的方法
            }
          },
        });
      }, 1000);
    },
  });
};

const toCreamDetil = (id) => {
  uni.navigateTo({
    url: `/pages/creamDetails/index?id=${id}`,
  });
};
const deleInfo = () => {
  popup1.value.open("button-text");
};
</script>

<style scoped>
.index {
  background: #fff;
}
.entrusContent {
  background-color: #fafafa;
  padding: 0 27rpx;
  padding-bottom: 40rpx;
}
.entTitle {
  padding-top: 25rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entTitle .iconfont {
  color: #666666;
}
.essay {
  margin-top: 21rpx;
  padding: 28rpx 0 34rpx 0;
  border-radius: 11rpx;
  background: #ffffff;
}

.detailItem {
  padding: 0 32rpx 0 36rpx;
  display: flex;
  margin-bottom: 15rpx;
}
.patentTitle {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  flex: none;
}
.patentText {
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
  white-space: wrap;
}
.phon {
  color: #333333;
  font-size: 30rpx;
  align-items: center;
}

/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  padding: 27rpx 34rpx 32rpx 18rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 11rpx;
  margin-left: 40rpx;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 410rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.checkCream {
  width: 40rpx;
  /* margin-right: 32rpx; */
}
.entBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 54rpx;
  height: 91rpx;
  background: #1677ff;
  box-shadow: 2rpx 2rpx 9rpx 0rpx #c3c3c5;
  border-radius: 44rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #ffffff;
}
.dataList {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 0 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.identifyingCode {
  display: flex;
  justify-content: space-between;
  margin: 27rpx 21rpx 50rpx 21rpx;
}
.ctsInputCode,
.InputCode {
  display: flex;
  align-items: center;
  flex: 0 0 46%;
  width: 201rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  border: 0;
}
.ctsInputCode {
  padding-left: 16rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.InputCode {
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #1677ff;
}
.InputCode::after {
  border: 0;
  display: none;
}
.affirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo {
  text-align: center;
  padding: 50rpx 21rpx 80rpx 21rpx;
  font-size: 27rpx;
  font-weight: 400;
  color: #333333;
}
</style>
